<!DOCTYPE html>
<html class="wide wow-animation" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Single Product</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script th:src="@{/cdn-cgi/apps/head/3ts2ksMwXvKRuG480KNifJ2_JNM.js}"></script><link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CLato%7CKalam:300,400,700">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/fonts.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/shoprelease.css}">
    <style>.ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}</style>
    <style>
        .option_box{
            display:none;  //先把下拉菜单隐藏，点击时再显示
        }
    </style>
    <script>
        window.onload = function () {
            // 判断是否有某个class
            function hasClass(ele, cls) {
                return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
            }
            // //为指定的dom元素添加样式
            function addClass(ele, cls) {
                if (!hasClass(ele, cls)) ele.className += " " + cls;
            }
            // //删除指定dom元素的样式
            function removeClass(ele, cls) {
                if (hasClass(ele, cls)) {
                    var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
                    ele.className = ele.className.replace(reg, " ");
                }
            }

            document.getElementsByClassName('select-input')[0].onclick = function () {
                var optionsBox = document.getElementsByClassName('options-box')[0];
                var selectInput = document.getElementsByClassName('select-input')[0];
                // 这里最好用children，不要用childNode, 否则会有多余的text节点
                var lis = optionsBox.children;
                if (hasClass(optionsBox, 'hide')) { // 如果当前不是正在打开选项状态
                    removeClass(optionsBox, 'hide')
                    addClass(selectInput, 'isActive')
                    for (var i = 0; i < lis.length; i++) {
                        if (lis[i].innerHTML == selectInput.value) { // 如果之前已经选择过，将之前的选项激活状态
                            addClass(lis[i], 'active')
                        } else {
                            removeClass(lis[i], 'active')
                        }
                    }
                } else {
                    addClass(optionsBox, 'hide');
                    removeClass(selectInput, 'isActive');
                }
            }

            document.getElementsByClassName('options-box')[0].onclick = function (e) {
                var optionsBox = document.getElementsByClassName('options-box')[0];
                var selectInput = document.getElementsByClassName('select-input')[0];
                //这一行及下一行是为兼容IE8及以下版本
                e = e || window.event;
                var target = e.target || e.srcElement;
                document.getElementById("kid").value = target.value;
                // alert(document.getElementById("kid").value) ;
                if (target.tagName.toLowerCase() === "li") {
                    // 将选中的值赋值给展示框文本
                    selectInput.value = target.innerHTML;
                    // 关闭选择列表
                    addClass(optionsBox, 'hide');
                    // 取消展示框的激活状态
                    removeClass(selectInput, 'isActive');
                }
            }

            // 列表中选项滑过效果
            document.getElementsByClassName('options-box')[0].onmouseover = function (e) {
                // 事件代理
                var optionsBox = document.getElementsByClassName('options-box')[0];
                var selectInput = document.getElementsByClassName('select-input')[0];
                e = e || window.event;
                var target = e.target || e.srcElement;
                if (target.tagName.toLowerCase() === "li") {
                    if (target.innerHTML != selectInput.value) { //如果滑过的不是已经选中的，给予暂时的滑过效果
                        addClass(target, 'active');
                    }
                }
            }

            document.getElementsByClassName('options-box')[0].onmouseout = function (e) {
                var optionsBox = document.getElementsByClassName('options-box')[0];
                var selectInput = document.getElementsByClassName('select-input')[0];
                //这一行及下一行是为兼容IE8及以下版本
                e = e || window.event;
                var target = e.target || e.srcElement;
                if (target.tagName.toLowerCase() === "li") {
                    if (target.innerHTML != selectInput.value) { // 如果滑出的不是已经选中的，将滑过的效果取消
                        removeClass(target, 'active');
                    }
                }
            }
        }

    </script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="ie-panel"><a th:href="@{http://windows.microsoft.com/en-US/internet-explorer/}"><img th:src="@{/images/ie8-panel/warning_bar_0000_us.jpg}" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
<div class="preloader">
    <div class="preloader-body">
        <div class="cssload-bell">
            <div class="cssload-circle">
                <div class="cssload-inner"></div>
            </div>
            <div class="cssload-circle">
                <div class="cssload-inner"></div>
            </div>
            <div class="cssload-circle">
                <div class="cssload-inner"></div>
            </div>
            <div class="cssload-circle">
                <div class="cssload-inner"></div>
            </div>
            <div class="cssload-circle">
                <div class="cssload-inner"></div>
            </div>
        </div>
    </div>
</div>
<div class="page">
    <!-- Page Header-->
    <header class="section page-header">
        <!-- RD Navbar-->
        <div class="rd-navbar-wrap">
            <nav class="rd-navbar rd-navbar-creative rd-navbar-creative-2" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-lg-stick-up-offset="100px" data-xl-stick-up-offset="112px" data-xxl-stick-up-offset="132px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
                <div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>
                <div class="rd-navbar-aside-outer">
                    <div class="rd-navbar-aside">
                        <div class="rd-navbar-collapse">
                            <ul class="contacts-classic">
                                <li><span class="contacts-classic-title">Call us:</span>+(86) 13434985070
                                </li>
                                <li>1057071216@qq.com</li>
                            </ul><a class="rd-navbar-basket rd-navbar-basket-mobile fl-bigmug-line-shopping202" href="#"><span>2</span></a>
                        </div>
                        <!-- RD Navbar Panel-->
                        <div class="rd-navbar-panel">
                            <!-- RD Navbar Toggle-->
                            <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
                            <!-- RD Navbar Brand-->
                            <div class="rd-navbar-brand">
                                <!--Brand--><a class="brand" th:href="@{/index.html}"><img class="brand-logo-dark" th:src="@{/images/logohei.jpg}" alt="" width="117" height="41"/><img class="brand-logo-light" th:src="@{/images/logohei.jpg}" alt="" width="117" height="41"/></a>
                            </div>
                        </div>
                        <div class="rd-navbar-aside-element">
                            <!-- RD Navbar Search-->
                            <div class="rd-navbar-search rd-navbar-search-2">
                                <button class="rd-navbar-search-toggle rd-navbar-fixed-element-3" data-rd-navbar-toggle=".rd-navbar-search"><span></span></button>
                                <form class="rd-search" action="search-results.html" data-search-live="rd-search-results-live" method="GET">
                                    <div class="form-wrap">
                                        <input class="rd-navbar-search-form-input form-input" id="rd-navbar-search-form-input" type="text" name="s" autocomplete="off"/>
                                        <label class="form-label" for="rd-navbar-search-form-input">Search...</label>
                                        <div class="rd-search-results-live" id="rd-search-results-live"></div>
                                        <button class="rd-search-form-submit fl-bigmug-line-search74" type="submit"></button>
                                    </div>
                                </form>
                            </div>
                            <!-- RD Navbar Basket-->
                            <div class="rd-navbar-fixed-element-2 select-inline">
                                <div class="rd-navbar-fixed-element-2 select-inline">
                                    <a th:if="${session.user}" class="team-info-figure" th:href="@{/personal-center}">
                                        <img th:src="@{${session.user.pictureUrl}}" width=50 height=50>
                                    </a>
                                    <a th:unless="${session.user}" class="team-info-figure" th:href="@{/personal-center}">
                                        <img th:src="@{/img/UserHead/headpicturedefalut.jpg}" width=50 height=50>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rd-navbar-main-outer">
                    <div class="rd-navbar-main">
                        <div class="rd-navbar-nav-wrap">
                            <ul class="rd-navbar-nav">
                                <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/home.html}">首页</a></li>
                                <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/grid-shop.html}">商城</a></li>
                                <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/order-page.html}">求购广场</a></li>
                                <li class="rd-nav-item active"><a class="rd-nav-link" th:href="@{/freeshare.html}">免费分享区</a></li>
                                <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/blog-list.html}">合作推广</a>
                                    <ul class="rd-menu rd-navbar-dropdown">
                                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" th:href="@{/templates/single-post.html}">我要提建议</a></li>
                                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" th:href="@{/templates/single-post.html}">商务合作</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <!-- Single Product-->
    <section class="section section-sm section-first bg-default">
        <div class="container">
            <div class="col-12">
                <h5 class="single-post-title">发布商品信息</h5>
                <form class="rd-form rd-mailform" data-form-output="form-output-global" data-form-type="contact" method="post" th:action="@{/product}" id="product" enctype="multipart/form-data">
                    <div class="row row-20 row-md-30">
                        <div class="col-sm-4">
                            <div class="form-wrap">
                                <input class="form-input" placeholder="商品名" id="contact-first-name-2" type="text" name="name" data-constraints="@Required">
                                <label class="form-label" for="contact-first-name-2"></label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-wrap">
                                <input class="form-input" placeholder="商品介绍" id="contact-last-describe-2" type="text" name="describe" data-constraints="@Required">
                                <label class="form-label" for="contact-last-describe-2"></label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-wrap">
                                <input class="form-input" placeholder="出售价格" id="contact-last-price-2" type="text" name="price" data-constraints="@Required">
                                <label class="form-label" for="contact-last-price-2"></label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-wrap">
                                <input class="form-input" placeholder="商品原价(可不填)" id="contact-first-o_price-2" type="text" name="o_price" data-constraints="@Required">
                                <label class="form-label" for="contact-first-o_price-2"></label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-wrap">
                                <input class="form-input" placeholder="商品数量(可不填)" id="contact-first-count-2" type="text" name="count" data-constraints="@Required">
                                <label class="form-label" for="contact-first-count-2"></label>
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-wrap">
                                <input class="form-input" placeholder="取货方式" id="contact-last-take_way-2" type="text" name="take_way" data-constraints="@Required">
                                <label class="form-label" for="contact-last-take_way-2"></label>

                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="select-box">
                                <input type="text" class="select-input" id="kindd" readonly placeholder="商品种类"/>
                                <ul class="options-box hide" id="kind">
                                    <li value=1>数码产品</li>
                                    <li value=2>书籍教材</li>
                                    <li value=3>衣鞋帽伞</li>
                                    <li value=4>代步工具</li>
                                    <li value=5>体育健身</li>
                                    <li value=6>日常用品</li>
                                    <li value=7>学习资源</li>
                                    <li value=8>其他</li>
                                </ul>
                                <input type="text" name="kid" style="display:none" id="kid">
                            </div>
                            <script>
                                $(".u_select").click(function () {
                                    event.stopPropagation();
                                    $(this).children(".option_box").fadeToggle(200);
                                });
                                var kind = document.getElementById("kind")
                                kind.onclick = function (){
                                    document.getElementById("kindd").value = kind.value ;
                                }
                                $(document).click(function () {
                                    $(".option_box").fadeOut();
                                });
                            </script>
                        </div>
                        <div class="col-sm-4">
                        <div class="form-wrap">
                            <div >
                                <img  th:src="@{/img/ComPicture/upload.jpg}" th:id="previewimg" width=50 height=50></div>
                            <div >
                                <input type="file" id="img" name="img" onChange="preview(this)"/>
                            </div>
                            <script type="text/javascript">
                                function preview(obj){
                                    var img = document.getElementById("previewimg");
                                    img.src = window.URL.createObjectURL(obj.files[0]);
                                }
                            </script>
                        </div>
                        </div>
                    </div>


                    <br>
                    <br>
                    <br>
                    <div align="center">
                        <button class="button button-lg button-primary button-zakaria" type="submit" id="btn">提交信息</button>
                    </div>

                    <script>
                        document.getElementById("btn").onclick = function (){
                            //alert("hahahhaha")
                            document.getElementById("product").submit() ;
                        }
                    </script>
                </form>
            </div>
        </div>
    </section>
    <!-- Related Products-->
    <!-- Page Footer-->
</div>
<div class="snackbars" id="form-output-global"></div>
<script th:src="@{/js/core.min.js}"></script>
<script th:src="@{/js/script.js}"></script>
</body>
</html>